<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";
defineProps({
	nav:Array
})
const openMenu=ref("")
window.addEventListener("click",function(e){
	console.log("e:",e);
	openMenu.value=""
})
function menuHandle(fun){
	openMenu.value="aaa"
	fun()
}
</script>


<template>
<div class="header">
		<div class="logo"><img src="@/assets/logo.svg" alt=""></div>
		<div class="nav">
			<div class="nav_item" v-for="item in nav" @click.stop="openMenu=item.title">
				{{item.title}}
				<div class="item_menu" v-show="openMenu===item.title">
					<div class="item_menu_item" v-for="menu in item.menu" @click.stop="menuHandle(menu.handle||(()=>{}))">
						{{menu.title}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>


<style scoped>
.logo{
	width: 30px;
	height: 30px;
}
.header{
	height: var(--header-height);
	background-color: #333;
	display: flex;
	flex-direction: row;
	color: #808080;
	align-items: center;
	padding:0 10px;
}
.nav{
	height: 100%;
	display: flex;
	flex-direction: row;
}
.nav_item{
	padding: 0 1em;
	margin:0 .4em;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.nav_item:hover{
	background-color: #454646;
}

.item_menu{
	padding:0.4em 0;
	position:absolute;
	top: var(--header-height);
	left: 0;
	z-index: 1;
	background-color: #2a2a2a;
	width: calc(5em + 20px);
	box-shadow: 0px 2px 5px #000;
}
.item_menu_item{
	padding: 2px 10px;
}
.item_menu_item:hover{
	background-color: rgba(0, 0, 0, 0.5);
}
</style>